<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 10000px;
            /* width: 4000px; */
        }
        #nav{
            height: 80px;
            border: 2px solid gold;
        }
        #search{
            margin:  0 auto;
            width: 400px;
            height: 30px;
            border: 1px solid red;
            border-radius: 15px;
            padding-left: 20px;
            padding-top: 4px;
        }
    </style>
    <script>
        var left=0;
        window.onload=function(){
            var se=document.getElementById("search");
            left=se.offsetLeft;
        }
        //捕捉到滚动的事件
        window.onscroll=function(){
            var x=document.documentElement.scrollLeft||document.body.scrollLeft;
            var y=document.documentElement.scrollTop||document.body.scrollTop;
            console.log("x="+x+",y="+y);
            var se=document.getElementById("search");
            var h=se.offsetTop;

            console.log("left:"+left);
            if(y>=h){
                se.style.position="fixed";
                se.style.left=left+"px";
                se.style.top="5px";
            }else{
                se.style.position="static";
            }
        }
    </script>
</head>
<body>
<div id="nav"></div>
<div id="search">
    <form>
        <input type="search" name="wd"/><input type="submit" value="搜索"/>
    </form>
</div>
</body>
</html>